.ScrollButton {
    --controlLen: 414;
    /* 组件宽度 */
    --SBWide: calc(var(--controlLen, 414) * 1px * 0.2391);
    /* 组件高度 */
    --SBHigh: calc(var(--SBWide) * 0.3232);
    /* 组件边框 */
    --SBBorderWide: calc(var(--SBWide) * 0.0202);
    /* 字体大小 */
    --SBFontSize: calc(var(--SBWide) * 0.1414);

    /* 背景颜色 */
    --SBBackgroundColor: var(--StandardWhite, rgba(255, 255, 255, 1));
    /* 字体颜色 */
    --SBFontColor: var(--FontLightBlack, rgba(119, 131, 143, 1));
    /* 边框颜色 */
    --SBBorderColor: var(--iconWhite, rgba(245, 245, 245, 1));
}

.ScrollButton button {
    width: var(--SBWide);
    height: var(--SBHigh);
    border-radius: calc(var(--SBWide) * 0.0505);
    background: var(--SBBackgroundColor);
    border: var(--SBBorderWide) solid var(--SBBorderColor);

    font-size: var(--SBFontSize);
    font-weight: 400;
    color: var(--SBFontColor);

    position: relative;
    transition:
        top 0.3s ease-in-out,
        height 0.3s ease-in-out,
        width 0.3s ease-in-out,
        transform 0.1s ease-in-out,
        border 0.1s ease-in-out
    ;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ScrollButton button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    background: linear-gradient(180deg, var(--SBBackgroundColor) 0%, var(--SBBorderColor) 50%, var(--SBBackgroundColor) 100%);

    left: 0;
    bottom: 0;
    transition: all 0.2s ease-in-out;
    border-radius: calc(var(--SBWide) * 0.0405);
}

.ScrollButton button:hover::before {
    top: 0;
    height: 100%;
}

.ScrollButton button:active::before {
    transform: scale(0.1);
}

.ScrollButton button:active {
    border: var(--SBBorderWide) solid var(--SBFontColor);
}

.ScrollButton .scrollButtonLabel {
    top: 0;
    width: 70%;
}